摘要

• 這篇文章的目的是 ?
• 關於 React 的哪些必須知道的知識
• 連結

這篇文章的目的是 ?

1. 懂這些 React 知識，有什麼好處？

React 是一個流行的前端 JavaScript 框架，深入了解以下 React 知識有助於提高開發效率和代碼品質。好處包括：

• 更好的性能：React 使用虛擬 DOM，僅更新必要的部分，以減少渲染時間，提高性能。
• 可維護性：組件化開發使代碼易於理解和維護。
• 可重用性：可以輕鬆地重用組件，節省開發時間。
• 社區支援：React 有龐大的社區和生態系統，可以快速解決問題。
• 跨平台：React Native 讓你使用相同的 React 代碼來開發原生移動應用。

關於 React 的額外知識補充

2. Immutable 的概念解釋以及 immer 的概念解釋。

Immutable 指的是資料一旦創建後不能被更改的特性。在 React 中，推崇使用 Immutable 資料來管理狀態。這有助於跟蹤狀態的變化，避免副作用。

舉例：

jsxCopy code
// 使用不可變資料的方式
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // 創建一個新陣列而不更改原始陣列

// 使用 immer 來實現不可變性
import produce from 'immer';

const state = { count: 0 };

const newState = produce(state, draftState => {
  draftState.count += 1; // 修改 draftState 而不更改原始 state
});

immer 是一個庫，可以幫助你在不改變原始資料的情況下修改資料。它簡化了不可變性的管理。

3. Key 值的作用解釋。

在 React 中，key 是用來幫助 React 識別並管理組件陣列中的元素的一個特殊屬性。key 的作用是：

• 當組件陣列中的項目重新排序時，React 使用 key 來識別哪些元素已經存在，哪些是新增或被刪除的。
• key 可以幫助 React 優化性能，以確保只更新必要的部分，而不是重新渲染整個列表。

jsxCopy code
// 使用 key 的例子
const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
];

const itemList = items.map(item => (
  <div key={item.id}>{item.text}</div>
));

4. useState 到底是同步還是非同步？

useState 是 React 的 Hook 之一，用於管理組件的狀態。它是同步的，但 React 在重新渲染時可能會將多個 useState 更新合併為一個批處理，以提高性能。這意味著如果在一個函數中多次調用 useState，React 可能會將它們一起執行，然後一次性更新組件。

5. Hooks 閉包陷阱

Hooks 是 React 16.8 引入的，它們允許你在函數組件中使用狀態和生命周期功能。Hooks 的一個特點是閉包陷阱，即函數組件中的內部函數可以訪問外部函數的變數。

jsxCopy code
function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1); // 此處可以訪問外部的 count 變數
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

6. 在 React 裡，盡量不要使用 inline style，為何？

在 React 中，盡量避免使用內聯樣式（inline style）是為了保持代碼的可讀性、可維護性和可重用性。直接在元素上設置內聯樣式會導致以下問題：

• 難以維護：當樣式分散在多個元素上時，很難跟蹤和修改樣式。
• 難以重用：具有相同樣式的元素無法輕鬆重用。
• 難以進行樣式的動態變更：動態更改樣式時，使用 CSS 類更方便。

代替內聯樣式的方法是使用 CSS 類或 CSS-in-JS 解決方案，這樣可以更好地組織和管理樣式，提高代碼的可維護性。

7. React.memo 是什麼？為什麼要學？以及如何使用？

React.memo 是一個高階組件（Higher-Order Component）或 Hook，用於優化 React 函數組件的性能。它可以記住組件的渲染結果，只有當組件的 props 發生變化時才重新渲染。

jsxCopy code
import React from 'react';

const MyComponent = React.memo(({ value }) => {
  console.log('Rendering MyComponent');
  return <div>{value}</div>;
});

// 使用 React.memo 包裹組件

學習使用 React.memo 可以幫助你減少不必要的組件重新渲染，提高應用程序的性能。要使用它，只需將你希望進行性能優化的組件包裹在 React.memo 中即可。